import React, { useEffect, useState } from 'react'
import { Card } from 'antd'
import { Pie } from '@ant-design/plots';

import styles from '@/views/overview/index.module.scss'

interface propsData {
  data: any;
}

const RehearsalBox: React.FC<propsData> = ({ data }) => {

  const [echart , setEchart] = useState(null)
  const [showData , setShowData] = useState(null)
  const [countNum , setCountNum] = useState(0)
  useEffect(() => {
    const dataOrigin = Array.isArray(data) && data.length ? data : [
      { key: 1, year: '2022', value: 2 },
      { key: 2, year: '2023', value: 2 },
      { key: 3, year: '2024', value: 2 },
    ]
    let num = 0
    const eleArray = dataOrigin.map(item => {
      num+=item.value
      return (
        <span key={item.key}>{item.year}年：{ item.value }次</span>
      )
    })
    setCountNum(num)
    setShowData(eleArray)
    const config = {
      data: dataOrigin,
      autoFit: true,
      angleField: 'value',
      colorField: 'year',
      startAngle: Math.PI,
      endAngle: Math.PI * 2,
      innerRadius: 0.5,
      legend: {
        color: {
          layout: {
            justifyContent: 'center',
            alignItems: 'center',
          },
          title: false,
          position: 'top',
          rowPadding: 5,
          itemLabelText: (datum) =>{
            let tagName = ''
            if (typeof datum === 'string') {
              tagName = datum
            } else if (typeof datum === 'object') {
              tagName = datum.label
            }
            return `${tagName}年`
          }
        },
      },
    };
    setEchart(config)
    return () => {}
  }, [])
  return (
    <Card className={styles['rehearsal-box']} title="园区企业消防演练">
      <div className={styles['box-content']}>
        <div className={styles['right-text']}>
          <span>共计演练：{countNum}次</span>
          {showData}
          <div style={{marginTop: '30px'}}>查看详情</div>
        </div>
        <Pie height={200} {...echart} insetTop={30}/>
      </div>
    </Card>
  )
}

export default RehearsalBox
